.k-preview {
	$border-color: #597b89;
	$input-size: 18px;
	.title,
	.desc {
		text-align: center;
		margin: 8px auto;
	}
	i {
		font-style: normal;
	}
	.desc {
		color: #666;
	}
	.ques-block {
		margin: 20px;
		background: #333;
		padding: 16px;

		.checkbox,
		.radio {
			display: flex;
			cursor: pointer;
			align-items: center;
			margin: 12px auto;

			input[type="checkbox"],
			input[type="radio"] {
				width: $input-size;
				height: $input-size;
				margin-right: 3px;
			}
		}
		.ques-opt-title {
			font-size: 18px;
			.star {
				&::after {
					content: "* ";
					color: red;
				}
			}
		}
		.ques-opt-body {
			font-size: 14px;
			color: #999;
			input[type="text"] {
				height: 30px;
				width: 100%;
				border: none;
				outline: none;
				border-bottom: 1px solid $border-color;
				background: transparent;
				padding: 0 6px;
				&:focus {
					color: rgb(0, 121, 151);
				}
			}
			&.horz-blank {
				line-height: 24px;
				[contenteditable="true"] {
					min-width: 120px;
					padding: 0 8px;
					outline: none;
					text-align: center;
					display: inline-block;
					border-bottom: 1px solid $border-color;
					&:focus {
						color: rgb(0, 121, 151);
					}
				}
			}
			table {
				width: 100%;
				border-collapse: collapse;
				th,
				td {
					padding: 8px;
					text-align: left;
					vertical-align: middle;
					border: 1px solid #444;
				}
			}
			.ques-opt-item-table {
				.ques-opt-col {
					display: flex;
				}
				width: 100%;
				input {
					width: 100%;
					outline: none;
					border: none;
					background-color: transparent;
				}
				input[type="checkbox"],
				input[type="radio"] {
					width: $input-size;
					height: $input-size;
				}
			}
		}
	}
}
